<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 5px;

        }
    </style>
</head>

<body>
<div id="drag-target" data-content="我是数据" draggable="true">拽我！</div>
<div id="drat-dest"></div>
</body>
<script type="text/javascript">
    var drag_target = document.getElementById("drag-target"),
            drat_dest = document.getElementById("drat-dest");
    drag_target.addEventListener('dragstart', function (e) {
        e.dataTransfer.setData('text/plain', e.target.getAttribute('data-content'));
    }, false);
    drat_dest.addEventListener('drop', function (e) {
        drat_dest.innerHTML = e.dataTransfer.getData('text/plain');
    }, false);
    drat_dest.addEventListener('dragover', function (e) {
        e.preventDefault();
    }, false);

</script>
</html>